---
id: 5f3cade9fa77275d9f4efe62
title: الخطوة 40
challengeType: 0
dashedName: step-40
---

# --description--

قد نجح ذلك، ولكن لا يزال هناك مسافة فارغة صغير على يمين price.

يمكنك الاستمرار في تجربة نسب مئوية مختلفة للعرض. وبدلا من ذلك، استخدم مفتاح space على لوحة المفاتيح لنقل عنصر `p` مع الفئة `price` بجانب عنصر `p` مع الفئة `flavor` بحيث تكون على نفس السطر في المحرر. Make sure there is no space between the two elements.

# --hints--

يجب ألا يكون للعناصر `p` الخاصة بك أي مساحة بينها.

```js
assert(code.match(/Vanilla<\/p><p/));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article class="item">
--fcc-editable-region--
            <p class="flavor">French Vanilla</p>
            <p class="price">3.00</p>
--fcc-editable-region--
          </article>
          <article>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
          </article>
          <article>
            <p>Pumpkin Spice</p>
            <p>3.50</p>
          </article>
          <article>
            <p>Hazelnut</p>
            <p>4.00</p>
          </article>
          <article>
            <p>Mocha</p>
            <p>4.50</p>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>
```

```css
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

.item p {
  display: inline-block;
}

.flavor {
  text-align: left;
  width: 49%;
}

.price {
  text-align: right;
  width: 49%;
}
```

